<template>
  <div class="baseHeader">
    <div class="text-center flex justify-center">
      <n-grid :cols="8" item-responsive>
        <n-gi span="1200:1 0">
          <div class="light-green" />
        </n-gi>
        <n-gi span="1200:6 8">
          <div class="green flex justify-around items-center">
            <n-menu class="flex" :options="menuOptions" mode="horizontal" />
            <n-menu class="flex" :options="publish" mode="horizontal" />
          </div>

          <!-- <div class="green flex">
            <template v-for="item of routes[0].children" :key="item.path">
              <router-link :to="item.path" class="item flex flex-grow h-full">
                <div
                  class="bg-amber-500 h-full w-full flex items-center justify-center"
                >
                  {{ item.meta.title }}
                </div>
              </router-link>
            </template>
          </div> -->
        </n-gi>
        <n-gi span="1200:1 0">
          <div class="light-green flex items-center">
            <n-menu
              class="flex-grow"
              :options="rightMenuOptions"
              mode="horizontal"
            />
          </div>
        </n-gi>
      </n-grid>
    </div>
  </div>
</template>
<script setup>
import { RouterLink } from "vue-router";
// import { routes } from "@/router/routes.js";
import { NIcon } from "naive-ui";
import { h } from "vue";
import {
  HomeOutline as HomeOutline,
  Library as Library,
  BookOutline as BookOutline,
  JournalOutline as JournalOutline,
  CreateOutline as CreateOutline,
  PricetagOutline as PricetagOutline,
  EnterOutline as EnterOutline,
  PencilOutline as PencilOutline,
} from "@vicons/ionicons5";
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}
// 菜单栏
const menuOptions = [
  {
    label: () =>
      h(
        RouterLink, //需要渲染成的标签
        {
          to: {
            name: "HomePage",
            params: {
              lang: "zh-CN",
            },
          },
          class: "",
        },
        { default: () => "首页" }
      ),
    key: "Home",
    icon: renderIcon(HomeOutline),
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: "CategorySort",
          },
        },
        { default: () => "文章分类" }
      ),
    key: "article",
    icon: renderIcon(BookOutline),
  },
  {
    label: () =>
      h(
        RouterLink, //需要渲染成的标签
        {
          to: {
            name: "myTag",
            params: {
              lang: "zh-CN",
            },
          },
          class: "",
        },
        { default: () => "标签" }
      ),
    key: "tags",
    icon: renderIcon(PricetagOutline),
  },
  {
    label: () =>
      h(
        RouterLink, //需要渲染成的标签
        {
          to: {
            name: "myArchives",
            params: {
              lang: "zh-CN",
            },
          },
          class: "",
        },
        { default: () => "文章归档" }
      ),
    key: "go-back-home",
    icon: renderIcon(Library),
  },
  {
    label: () =>
      h(
        RouterLink, //需要渲染成的标签
        {
          to: {
            name: "MyLog",
            params: {
              lang: "zh-CN",
            },
          },
          class: "",
        },
        { default: () => "日志" }
      ),
    key: "journal",
    icon: renderIcon(JournalOutline),
  },
  {
    label: () =>
      h(
        RouterLink, //需要渲染成的标签
        {
          to: {
            name: "myMessageBoard",
            params: {
              lang: "zh-CN",
            },
          },
          class: "",
        },
        { default: () => "留言板" }
      ),
    key: "message",
    icon: renderIcon(CreateOutline),
  },
];
// 登录注册
const rightMenuOptions = [
  {
    label: () =>
      h(
        RouterLink, //需要渲染成的标签
        {
          to: {
            name: "MyLogin",
            params: {
              lang: "zh-CN",
            },
          },
          class: "",
        },
        { default: () => "登录" }
      ),
    key: "MyLogin",
    icon: renderIcon(EnterOutline),
  },
  {
    label: () =>
      h(
        RouterLink, //需要渲染成的标签
        {
          to: {
            name: "MyLogon",
            params: {
              lang: "zh-CN",
            },
          },
          class: "",
        },
        { default: () => "注册" }
      ),
    key: "MyLogon",
    icon: renderIcon(PencilOutline),
  },
];
// 发布
const publish = [
  {
    label: () =>
      h(
        RouterLink, //需要渲染成的标签
        {
          to: {
            name: "BlogWrite",
          },
          class: "",
        },
        { default: () => "发布" }
      ),
    key: "BlogWrite",
    icon: renderIcon(PencilOutline),
  },
];
</script>
<style lang="scss" scoped>
.baseheader {
  min-width: 1200px;
}
.light-green {
  height: 54px;
  background-color: rgba(0, 128, 0, 0.12);
}
.green {
  height: 54px;
  min-width: 3/5;
  background-color: rgba(0, 128, 0, 0.24);
}
.item {
  min-width: 50px;
}
.gohome {
  font-size: large;
}
.text-center {
  min-width: 1150px;
}
</style>
